<template>
    <div class="">
        <el-table :data="tableData" style="width: 100%" border stripe>
            <el-table-column type="index" label="序号" width="180"> </el-table-column>
            <el-table-column prop="name" label="分类图标" width="180"> </el-table-column>
            <el-table-column prop="address" label="分类名称"> </el-table-column>
            <el-table-column type="index" label="上级分类" width="180"> </el-table-column>
            <el-table-column prop="name" label="排序" width="180"> </el-table-column>
            <el-table-column prop="address" label="操作">
                <template slot-scope="scope">
                    {{ scope.row }}
                    <el-button type="primary" size="mini" @click="editPro">修改</el-button>
                    <el-button type="primary" size="mini" @click="delePro">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改分类属性面板 -->
        <el-dialog title="修改商品分类" :visible.sync="editVisible" width="50%">
            <!-- 第一行 -->
            <el-row>
                <el-col :span="12"> 分类名称: <el-input v-model="name"> </el-input> </el-col>
                <el-col :span="12">
                    上级分类:
                    <el-select v-model="selectedValue" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
                    </el-select>
                </el-col>
            </el-row>

            <!-- 第二行 -->
            <el-row>
                <el-col :span="12">
                    <div class="crop-demo">
                        <span class="title">分类图标:</span>
                        <img :src="cropImg" class="pre-img" />
                        <div class="crop-demo-btn">
                            选择图片
                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage" />
                        </div>
                    </div>
                </el-col>
                <el-col :span="12"> 排序: </el-col>
            </el-row>
        </el-dialog>
    </div>
</template>

<script>
export default {
  name: 'brand',
  data () {
    return {
      editVisible: false,
      name: '', // todo
      selectedValue: '',
      cropImg: '',
      tableData: [
        {
          name: 'zjs'
        }
      ],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }]
    }
  },
  created () {

  },
  mounted () {

  },
  methods: {
    // 点击修改按钮, 修改分类名称
    editPro () {
      this.editVisible = true
    },

    // 点击删除按钮, 删除分类
    delePro () {

    },

    // 上传图片
    setImage (e) {
      console.log(11)
      const file = e.target.files[0]
      if (!file.type.includes('image/')) {

      }
    }
  }
}
</script>

<style scoped>
.el-input {
    width: 203px;
}

.el-row {
    margin-bottom: 20px;
}

.pre-img {
    width: 100px;
    height: 100px;
    background: #f8f8f8;
    border: 1px solid #eee;
    border-radius: 5px;
}

.crop-demo {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.crop-demo-btn {
    position: relative;
    width: 80px;
    height: 40px;
    line-height: 40px;
    padding: 0 20px;
    background-color: #409eff;
    color: #fff;
    font-size: 14px;
    border-radius: 4px;
    box-sizing: border-box;
}

.crop-input {
    position: absolute;
    width: 80px;
    height: 40px;
    left: 0;
    top: 0;
    opacity: 0;
    cursor: pointer;
}

.title {
    margin-top: 10px;
}

.el-col {
    padding-right: 66px;
}
</style>
